<template>
	<view class="uploadReportIndex">
		<u-text text="选择上传类型" size="48rpx" bold color="#333333" align="center"></u-text>
		<u-text text="选取照片或者拍照进行上传" size="28rpx" color="#999999" align="center"></u-text>

		<view class="cellGroup">
			<u-cell-group :border="false">
				<u-cell v-for="item in uploadTypeList" :disabled="item.disabled" :key="item.jumpUrl" :icon="item.icon"
					size="large" :label="
                        !item.disabled ? item.lable : '小程序暂不支持上传文件'
                    " :border="false" :customStyle="cellItemStyle" :iconStyle="iconStyle" isLink
					@click="jump(item.jumpUrl)">
					<u--text slot="title" :text="item.title" color="#333" bold size="36rpx"></u--text>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cellItemStyle: {
					backgroundColor: "#EFEFEF",
					borderRadius: "16rpx",
					marginBottom: "46rpx",
				},
				iconStyle: {
					width: "80rpx",
					height: "80rpx",
					marginRight: "10rpx",
				},
				uploadTypeList: [{
						icon: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/7066a39103b04813bd9aaad9e579b80f.png",
						lable: "选取照片文件进行上传",
						title: "照片上传",
						disabled: false,
						jumpUrl: "/pages_my/upload_report_images/index?uploadType=1",
					},
					// {
					//   icon: "/static/images/wenjian.png",
					//   lable: "选取文档文件进行上传",
					//   title: "文件上传",
					//   disabled: true,
					//   jumpUrl: "/pages_my/upload_report_images/index?uploadType=2",
					// },
				],
			};
		},
		methods: {
			jump(url) {
				this.$u.route({
					url,
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped lang="scss">
	.uploadReportIndex {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 92rpx 50rpx;
		box-sizing: border-box;

		.cellGroup {
			width: 100%;
			margin-top: 94rpx;
		}
	}
</style>
